<template>
    <div class="transmit-addr">
        <el-page-header @back="goBack" content="管理发票寄送地址"></el-page-header>

        <div class="title">{{title}}</div>

        <div>
            <el-form ref="addrInfo" :model="addrInfo"  :rules="addrInfoRules" label-width="120px" :inline-message="true">
                <el-form-item label="地址信息：" prop="district">
                    <el-select v-model="addrInfo.province" placeholder="请选择省份" @change="onChangeProvince">
                        <el-option
                                v-for="p in provinceList"
                                :key="p.provinceId"
                                :label="p.provinceName"
                                :value="p.provinceId">
                        </el-option>
                    </el-select>
                    <el-select v-model="addrInfo.city" placeholder="请选择市/区" style="margin: 0px 26px"
                               @change="onChangeCity">
                        <el-option
                                v-for="c in cityList"
                                :key="c.cityId"
                                :label="c.cityName"
                                :value="c.cityId">
                        </el-option>
                    </el-select>
                    <el-select v-model="addrInfo.district" placeholder="请选择县">
                        <el-option
                                v-for="d in distList"
                                :key="d.districtId"
                                :label="d.districtName"
                                :value="d.districtId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="详细地址：" prop="detailAddress">
                    <el-input v-model="addrInfo.detailAddress" placeholder="请输入详细地址信息，如小区、单位、门牌号等" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码：" prop="postcode">
                    <el-input v-model="addrInfo.postcode" placeholder="请填写邮政编码" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="收件人姓名：" prop="recipients">
                    <el-input v-model="addrInfo.recipients" placeholder="请输入收件人姓名" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="addrInfo.phone" placeholder="请输入正确的手机号码" class="input-width"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <div class="save-addr">
            <div>
                <div>
                    <el-checkbox v-model="addrInfo.status">设为默认寄送地址</el-checkbox>
                </div>
                <div style="margin-top: 40px">
                    <el-button size="mini" type="primary" style="width: 80px" @click="saveAddrInfo()">保存</el-button>
                    <el-button size="mini" type="info" style="width: 80px">取消</el-button>
                </div>
            </div>
        </div>

        <div class="show-info">已保存了<span style="color: red;margin: 0px 5px">{{transmitAddrData.length}}条</span>地址信息，还可以再添加{{15-transmitAddrData.length}}条地址信息
        </div>

        <div class="margin-top20">
            <el-table :data="transmitAddrData" border style="width: 100%">
                <el-table-column align="center" prop="recipients" label="收件人" width="180"></el-table-column>
                <el-table-column align="center" label="所在地区" width="180">
                    <template slot-scope="scope">
                        {{scope.row.province}}{{scope.row.city}}{{scope.row.district}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="detileAddress" label="详细地址"></el-table-column>
                <el-table-column align="center" prop="postcode" label="邮编"></el-table-column>
                <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
                <el-table-column align="center" fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="color: #2196F3" @click="modification(scope.row)">修改
                        </el-button>
                        <el-button type="text" size="small" style="color: red" @click="showDeleteDialog(scope.row)">删除
                        </el-button>
                        <el-button type="info" size="small" style="color: #666666" v-if="scope.row.status==1">默认地址</el-button>
                        <el-button type="primary" size="mini" v-if="scope.row.status!=1"
                                   @click="setDefault(scope.row)">设为默认
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!--        dialog-->
        <!--        删除提示弹窗-->
        <el-dialog :visible.sync="deleteDialogVisible" width="300px" center :modal="false" top="40vh">
            <div align="center"><span>确定删除此发票地址吗？</span></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="deleteDialogVisible = false,deleteAddr()">确 定</el-button>
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script src="./transmit.addr.js"></script>
<style lang="scss" src="./transmit.addr.scss"></style>
